<template>
  <div class="jc-component__range">
    <div class="jc-range" :class="rangeStatus ? 'success' : '' ">
      <div class="draggable_bg" ref="bg" :style="{ width: draggable }" ></div>
      <i @mousedown="rangeMove" :class="rangeStatus ? successIcon : startIcon "></i>
      {{rangeStatus ? successText :startText}}
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      //成功图标
      successIcon: {
        type: String,
        default: "el-icon-success"
      },
      //成功文字
      successText: {
        type: String,
        default: "验证通过"
      },
      //开始的图标
      startIcon: {
        type: String,
        default: "el-icon-d-arrow-right"
      },
      //开始的文字
      startText: {
        type: String,
        default: "请按住滑块，拖动到最右边"
      }
    },
    name: "JcRange",
    data() {
      return {
        rangeStatus: "",
        draggable: 0
      };
    },
    methods: {
      rangeMove(e) {
        let ele = e.target;
        let startX = e.clientX;
        let eleWidth = ele.offsetWidth;
        let parentWidth = ele.parentElement.offsetWidth;
        let MaxX = parentWidth - eleWidth;
        if (this.rangeStatus) {
          //不运行
          return false;
        }
        document.onmousemove = e => {
          let endX = e.clientX;
          this.disX = endX - startX;
          if (this.disX <= 0) {
            this.disX = 0;
          }
          if (this.disX >= MaxX - eleWidth) {
            //减去滑块的宽度
            this.disX = MaxX;
          }
          this.$refs.bg.style.transition = ".0s all";
          this.draggable = this.disX + 'px'; // 滑块中的背景
          ele.style.transform = "translateX(" + this.disX + "px)";
          ele.style.transition = ".0s all";
          e.preventDefault();
        };
        document.onmouseup = () => {
          if (this.disX !== MaxX) {
            ele.style.transition = ".5s all";
            ele.style.transform = "translateX(0)";
            this.$refs.bg.style.transition = ".5s all";
            this.draggable = 0 + 'px'; // 滑块中的背景
            //执行成功的函数
            this.$emit("errorFun", false);
          } else {
            this.rangeStatus = true;
            this.draggable = 0; // 滑块中的背景
            //执行成功的函数
            this.$emit("successFun", true);
          }
          document.onmousemove = null;
          document.onmouseup = null;
        };
      }
    }
  };
</script>
<style scoped>
  .jc-range {
    background-color: #e8e8e8;
    position: relative;
    transition: 1s all;
    user-select: none;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 45px;
    border-radius: 1px;
    z-index: 9999;
    /*no*/
  }

  .draggable_bg {
    position: absolute;
    left: 0;
    height: 100%;
    background-color: #7ac23c;
    z-index: -1;
  }

  .jc-range i {
    position: absolute;
    left: 0;
    width: 60px;
    /*no*/
    height: 100%;
    color: #919191;
    background-color: #fff;
    border: 1px solid #bbb;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
  }

  .jc-range.success {
    background-color: #7ac23c;
    color: #fff;
    border-radius: 1px;
    z-index: 99999;
  }

  .jc-range.success i {
    color: #7ac23c;
  }
</style>

